import { MciSvgIcon } from '@/components/base';
import { FormMode } from '@/components/base/Form/mode';
import { BaseNodeContent } from '@/components/business/BaseNode';
import { activeNodeId } from '@/components/business/BaseNode/state';
import { Assignment } from '@/components/business/Nodes/Rule/components/Assignment/index';
import { useCurrentNode } from '@/hooks/useCurrentNode';
import { useFlow } from '@/hooks/useFlow';
import { useGraph } from '@/hooks/useGraph';
import { formatConditions } from '@/utils/edge-process';
import { Edge } from '@antv/x6';
import { ElDrawer } from 'element-plus';
import { useNodeVerification } from '@/store/node-verification';

export const EdgeDrawer = defineComponent({
  setup() {
    const { graph } = useGraph(false);
    const currentNode = useCurrentNode();
    const { flowState } = useFlow();
    const verificationStore = useNodeVerification();
    const nodeType = computed(() => {
      if (!graph.value || !activeNodeId.value) return '';
      const shape = graph.value.getCellById(activeNodeId.value).shape;
      return shape;
    });
    const edgeOfNodes = computed(() => {
      if (nodeType.value === 'base-edge') {
        const node = graph.value?.getEdges().find((edge) => edge.id === activeNodeId.value);
        const sourceShape = node?.getSourceCell()?.shape;
        const targetShape = node?.getTargetCell()?.shape;
        return {
          sourceShape,
          targetShape
        };
      }

      return null;
    });
    const closeEdge = () => {
      const assignmentList = currentNode.getCondition();
      const strList: string[] = [];
      assignmentList?.forEach((assignment) => {
        const formattedConditions = formatConditions(assignment.conditions.conditions, assignment.conditions.conjs);
        formattedConditions && strList.push(formattedConditions);
      });
      const node = currentNode.getGraphNode() as Edge;
      const verificationResult = verificationStore.resultsOfList.find((result) => result.lineId === node?.id);
      if (strList.length !== 0) {
        node.setLabels([
          {
            attrs: {
              label: { text: strList.join('\n\n') },
              text: {
                fill:
                  verificationResult && verificationResult.errorMsg && verificationResult.errorMsg.length
                    ? 'var(--color-red-6)'
                    : 'var(--color-blue-6)',
                fontSize: 12,
                textAnchor: 'middle',
                textVerticalAnchor: 'middle'
              },
              rect: {
                ref: 'label',
                fill:
                  verificationResult && verificationResult.errorMsg && verificationResult.errorMsg.length
                    ? 'var(--color-red-1)'
                    : 'var(--color-blue-1)',
                stroke:
                  verificationResult && verificationResult.errorMsg && verificationResult.errorMsg.length
                    ? 'var(--color-red-4)'
                    : 'var(--color-blue-4)',
                refWidth: 14,
                refHeight: 5,
                refX: -7,
                refY: -2.5,
                rx: 20,
                ry: 20
              }
            },
            position: {
              distance: 0.5
            }
          }
        ]);
      } else {
        node?.setLabels([]);
      }
      setTimeout(() => {
        activeNodeId.value = '';
      });
    };
    return () => {
      return (
        <FormMode mode={flowState.value === 'edit' ? 'edit' : 'view'}>
          <ElDrawer
            destroyOnClose
            direction="btt"
            size={800}
            appendToBody
            modelValue={!!activeNodeId.value && nodeType.value === 'base-edge'}
            onClose={() => closeEdge()}>
            {{
              header() {
                return (
                  <div class="flex gap-20">
                    <BaseNodeContent nodeType={edgeOfNodes.value?.sourceShape as any} />
                    <MciSvgIcon color="var(--color-gray-3)" name="right-arrow" />
                    <BaseNodeContent nodeType={edgeOfNodes.value?.targetShape as any} />
                  </div>
                );
              },
              default() {
                return (
                  <div class="pt-12">
                    <Assignment edges={true} />
                  </div>
                );
              }
            }}
          </ElDrawer>
        </FormMode>
      );
    };
  }
});
